<script setup lang="ts">
  import { getHtmlPage } from '@/services/api/setting';
  import { useRoute } from 'vue-router';
  const route = useRoute();
  // 用于保存动态插入的 style 和 script 元素
  const styleElements: HTMLStyleElement[] = [];
  const scriptElements: HTMLScriptElement[] = [];
  const htmlText = ref('');
  getHtmlPage(Number(route.params.id)).then(({ data }) => {
    renderContent(data);
  });
  const reportHTML = ref<HTMLDivElement | null>(null);
  // 动态渲染内容
  const renderContent = (data: any) => {
    const { pageHtml, pageCss, pageJs } = data;
    if (reportHTML.value) {
      reportHTML.value.innerHTML = pageHtml; // 渲染 HTML 内容

      // 2. 如果有 CSS 内容，动态插入到页面 <head> 中
      if (pageCss) {
        const styleElement = document.createElement('style');
        styleElement.textContent = pageCss;
        document.head.appendChild(styleElement);
        styleElements.push(styleElement); // 保存插入的 style 元素
      }

      // 3. 如果有 JavaScript 内容，动态插入到页面 <body> 中
      if (pageJs) {
        const scriptElement = document.createElement('script');
        scriptElement.textContent = pageJs;
        document.body.appendChild(scriptElement);
        scriptElements.push(scriptElement); // 保存插入的 script 元素
      }
    }
  };

  // 清除插入的 CSS 和 JS 元素
  const clearInjectedScriptsAndStyles = () => {
    // 清除所有动态插入的 style 元素
    styleElements.forEach(styleElement => {
      document.head.removeChild(styleElement);
    });
    styleElements.length = 0; // 清空存储数组

    // 清除所有动态插入的 script 元素
    scriptElements.forEach(scriptElement => {
      document.body.removeChild(scriptElement);
    });
    scriptElements.length = 0; // 清空存储数组
  };

  // 在组件卸载时清除已插入的 CSS 和 JS
  onBeforeUnmount(() => {
    console.log('beforeUnmount');
    clearInjectedScriptsAndStyles();
  });
</script>

<template>
  <div ref="reportHTML" v-html="htmlText" class="web-con"></div>
</template>

<style scoped lang="scss"></style>
